<template>
  <div class="intelligent-recommendation">
    <div class="top">
      <img src="@/assets/images/sgjHome/left-icon.png" alt="" />
      <span>智能推荐</span>
      <img src="@/assets/images/sgjHome/right-icon.png" alt="" />
    </div>
    <div class="line"></div>
    <div class="content-wrap">
      <div class="search-wrap">
        <el-input v-model="searchQuery" placeholder="请输入搜索内容"></el-input>
        <el-button @click="onSearch">搜索</el-button>
      </div>
      <div class="ai-wrap">
        <img src="@/assets/images/sgjHome/ai.png" alt="" />
        <div>
          <div>找不到你要的资源？</div>
          <div>试试AI助手</div>
        </div>
      </div>
    </div>
    <div class="list-wrap">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="综合" name="first">
          <div class="list">
            <div class="item" v-for="(item,index) in list" :key="index">
              <div class="left">
                <div class="title">{{item.title}}</div>
                <div class="sub-title">
                  {{item.subTitle}}
                </div>
                <div class="date">{{item.date}} 更新</div>
              </div>
              <div class="right">
                <div class="tag-wrap">
                  <div class="tag">CIM数据集</div>
                  <div class="tag">城市道路</div>
                </div>
                <div class="button-wrap">
                  <el-button class="full-piblic" type="primary"
                    >完全公开</el-button
                  >
                 <ul>
                  <li>
                    <img src="@/assets/images/sgjHome/view.png" alt="">
                    <span>{{item.view}}</span>
                  </li>
                  <li>
                    <img src="@/assets/images/sgjHome/download.png" alt="">
                    <span>{{item.download}}</span>
                  </li>
                   <li>
                    <img src="@/assets/images/sgjHome/thumbs-up.png" alt="">
                    <span>{{item.thumbsUp}}</span>
                  </li>
                 </ul>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="数据开源" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="能力开源" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="应用开源" name="fourth">定时任务补偿</el-tab-pane>
        <el-tab-pane label="算力开源" name="five">定时任务补偿</el-tab-pane>
        <el-tab-pane label="精选帖子" name="six">定时任务补偿</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      theme: this.$store.state.settings.theme,
      sideTheme: this.$store.state.settings.sideTheme,
      searchQuery: "",
      activeName: "first",
      list: [{
        title: '武汉市道路环境数据',
        subTitle: '武汉市道路的几何形状、交通信号、路标、路面状况等信息。',
        date: '2024-04-01',
        view: '142K',
        download: 11,
        thumbsUp: 20
      },
      {
        title: '武汉市道路环境数据',
        subTitle: '武汉市道路的几何形状、交通信号、路标、路面状况等信息。',
        date: '2024-04-01',
        view: '142K',
        download: 121,
        thumbsUp: 203
      },
      {
        title: '武汉市道路环境数据',
        subTitle: '武汉市道路的几何形状、交通信号、路标、路面状况等信息。',
        date: '2024-04-01',
        view: '142K',
        download: 511,
        thumbsUp: 120
      }]
    };
  },
  computed: {
    visible: {
      get() {
        return this.$store.state.settings.showSettings;
      },
    },
    fixedHeader: {
      get() {
        return this.$store.state.settings.fixedHeader;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "fixedHeader",
          value: val,
        });
      },
    },
    topNav: {
      get() {
        return this.$store.state.settings.topNav;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "topNav",
          value: val,
        });
        if (!val) {
          this.$store.dispatch("app/toggleSideBarHide", false);
          this.$store.commit(
            "SET_SIDEBAR_ROUTERS",
            this.$store.state.permission.defaultRoutes
          );
        }
      },
    },
    tagsView: {
      get() {
        return this.$store.state.settings.tagsView;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "tagsView",
          value: val,
        });
      },
    },
    sidebarLogo: {
      get() {
        return this.$store.state.settings.sidebarLogo;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "sidebarLogo",
          value: val,
        });
      },
    },
    dynamicTitle: {
      get() {
        return this.$store.state.settings.dynamicTitle;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "dynamicTitle",
          value: val,
        });
      },
    },
  },
  methods: {
    handleClick() {},
    onSearch() {},
    // 切换菜单
    changeMenu(val, path) {
      console.log(path, "path====");
      this.currentIndex = val;
      this.$router.push({ path: path });
    },
    themeChange(val) {
      this.$store.dispatch("settings/changeSetting", {
        key: "theme",
        value: val,
      });
      this.theme = val;
    },
    handleTheme(val) {
      this.$store.dispatch("settings/changeSetting", {
        key: "sideTheme",
        value: val,
      });
      this.sideTheme = val;
    },
    saveSetting() {
      this.$modal.loading("正在保存到本地，请稍候...");
      this.$cache.local.set(
        "layout-setting",
        `{
            "topNav":${this.topNav},
            "tagsView":${this.tagsView},
            "fixedHeader":${this.fixedHeader},
            "sidebarLogo":${this.sidebarLogo},
            "dynamicTitle":${this.dynamicTitle},
            "sideTheme":"${this.sideTheme}",
            "theme":"${this.theme}"
          }`
      );
      setTimeout(this.$modal.closeLoading(), 1000);
    },
    resetSetting() {
      this.$modal.loading("正在清除设置缓存并刷新，请稍候...");
      this.$cache.local.remove("layout-setting");
      setTimeout("window.location.reload()", 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.intelligent-recommendation {
  padding: 48px 262px;
  background: url("~@/assets/images/sgjHome/intelligentRecommendation.png")
    no-repeat;
  background-size: 100% 100%;
  .top {
    text-align: center;
    img {
      vertical-align: middle;
    }
    span {
      margin: 0 10px;
      vertical-align: middle;
      font-size: 24px;
      color: rgb(68, 75, 86);
      font-weight: 700;
    }
  }
  .line {
    height: 1px;
    background: rgb(190, 213, 255);
    margin-top: 16px;
  }
  .content-wrap {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;

    .search-wrap {
      display: flex;
      justify-content: flex-start;
      width: calc(100% - 300px);
      .el-input {
        font-size: 16px;
        ::v-deep input {
          height: 60px;
          border-radius: 4px 0 0 4px;
        }
      }
      .el-button {
        width: 135px;
        height: 60px;
        border-radius: 0px 6px 6px 0px;
        background: linear-gradient(
          270deg,
          rgb(43, 114, 255) 0%,
          rgb(43, 144, 255) 100%
        );
        color: rgb(255, 255, 255);
        font-family: 思源黑体;
        font-size: 21px;
        font-weight: 400;
      }
    }
    .ai-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: rgb(68, 75, 86);
      font-family: HarmonyOS Sans SC;
      font-size: 18px;
      font-weight: 400;
      text-align: center;
      img {
        margin-right: 10px;
      }
    }
  }
  .list-wrap {
    margin-top: 25px;
    background-color: #fff;
    .list {
      .item {
        display: flex;
        justify-content: space-between;
        padding: 20px 24px;
        border-bottom:1px solid rgb(238, 238, 238);
        .left {
          .title {
            color: rgb(51, 51, 51);
            font-family: 思源黑体;
            font-size: 30px;
            font-weight: 700;
            text-align: left;
            margin-bottom: 12px;
          }
          .sub-title {
            color: rgb(102, 102, 102);
            font-family: 思源黑体;
            font-size: 14px;
            font-weight: 400;
            line-height: 24.12px;
            letter-spacing: 14%;
            text-align: left;
            margin-bottom: 12px;
          }
          .date {
            color: rgb(102, 102, 102);
            font-family: 思源黑体;
            font-size: 16px;
            font-weight: 400;
            line-height: 23px;
            letter-spacing: 0px;
            text-align: left;
          }
        }
        .right {
          display: flex;
          justify-content: space-between;
          .tag-wrap {
            display: flex;
            justify-content: flex-start;
            .tag {
              border: 1px solid rgb(43, 142, 255);
              border-radius: 14px;
              color: rgb(68, 75, 86);
              font-family: HarmonyOS Sans SC;
              font-size: 14px;
              font-weight: 400;
              line-height: 24px;
              letter-spacing: 0px;
              text-align: center;
              height: 28px;
              line-height: 28px;
              width: 80px;
              margin-right: 10px;
            }
          }
          .button-wrap {
            text-align: right;
            margin-left: 60px;
            .el-button {
              color: rgb(255, 255, 255);
              font-family: HarmonyOS Sans SC;
              font-size: 14px;
              font-weight: 400;
              border: none;
              &.full-piblic {
                background: rgb(31, 190, 86);
              }
            }
            ul {
              display: flex;
              justify-content: space-between;
              li{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-right: 24px;
                margin-top: 50px;
                &:last-child{
                  margin-right: 0;
                }
                img{
                  margin-right: 8px;
                }
              }
            }
          }
        }
      }
    }
  }
  ::v-deep .el-tabs__item {
    width: 112px;
    text-align: center;
    color: rgb(68, 75, 86);
    font-family: HarmonyOS Sans SC;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    &.is-active {
      color: rgb(13, 134, 255);
      font-family: HarmonyOS Sans SC;
      font-size: 18px;
      font-weight: 500;
      text-align: center;
    }
  }
}
</style>
